<template>
  <div class="container">
    <el-form :inline="true">
      <el-form-item>
        <el-input v-model="pageGrid.name" placeholder="姓名"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="pageGrid.mobile" placeholder="电话"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="pageGrid.number" placeholder="工号"></el-input>
      </el-form-item>
      <el-form-item>
        <div class="d-flex ">
          <el-button type="primary" @click="getData">搜索</el-button>
          <el-button @click="clearSearch">重置</el-button>
          <el-upload
            class="upload-demo"
            :action="exportUrl"
            :data="uploadData"
            :limit="1"
            :file-list="fileList"
            :on-success="successUpload"
            :show-file-list="false">
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </div>
      </el-form-item>
    </el-form>
    <el-row style="margin-bottom:20px">
      <el-button type="primary" @click="addUser">新增</el-button>
    </el-row>
    <el-table v-loading="isLoading" :data="tableData" border class="table" ref="multipleTable">
      <el-table-column type="index" label="序号"></el-table-column>
      <el-table-column prop="number" label="工号" align="center"></el-table-column>
      <el-table-column prop="name" label="姓名" align="center"></el-table-column>
      <el-table-column prop="mobile" label="手机号" align="center"></el-table-column>
      <el-table-column prop="dept" label="部门" align="center"></el-table-column>
      <el-table-column prop="production" label="工序" align="center"></el-table-column>
      <el-table-column prop="createTime" label="创建时间" align="center"></el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="text" @click="editUser(scope.row)">编辑</el-button>
          <el-button type="text" @click="deleteUser(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageGrid.pageNo"
          :page-sizes="pageSizeArr"
          :page-size="pageGrid.pageSize"
          layout="total, sizes, prev, pager, next"
          :total="total">
      </el-pagination>
    </div>

    <el-dialog title="员工信息" :visible.sync="dialogFormVisible" width="600px" :close-on-click-modal="false" @close="closeDialog">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="60px" class="ruleForm">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="工号" prop="number">
          <el-input v-model="ruleForm.number"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="mobile">
          <el-input v-model="ruleForm.mobile"></el-input>
        </el-form-item>
        <el-form-item label="部门" prop="dept">
          <el-select v-model="ruleForm.dept" placeholder="请选择所属部门">
            <el-option :label="item.label" :value="item.value" v-for="item in department" :key="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="工序" prop="production">
          <el-input v-model="ruleForm.production"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import api from '../../../api';
  import commonInfo from '@/utils/common'
  import host from '@/utils/host';
  import { Department } from '../../common/enum'

  export default {
    name: "userManagement",
    data() {
      return {
        pageSizeArr: commonInfo.pageSizeArr,
        exportUrl: host.host + 'file/open/fileUpload',
        uploadData: {
				  type: 'staff'
				},
        isLoading: false,
        tableData: [],
        total: 0,
        fileList: [],
        pageGrid: {
          pageNo: 1,
          pageSize: 10,
          name: null,
          mobile: null,
          number: null,
        },
        isClick: true,
        dialogFormVisible: false,
        ruleForm: {
          name: '',
          dept: '',
          number: '',
          mobile: '',
          production: ''
        },
        rules: {
          name: [
            { required: true, message: '请输入员工名称', trigger: 'blur' },
          ],
          dept: [
            { required: true, message: '请选择所属渠道', trigger: 'blur' }
          ],
          number: [
            { required: true, message: '请输入工号', trigger: 'blur' },
          ],
          mobile: [
            { required: true, message: '请输入联系电话', trigger: 'blur' },
            { validator: this.validateNumber, trigger: 'change'},
          ],
          production: [
            { required: true, message: '请填写工序', trigger: 'blur' }
          ]
        },
        department: []
      }
    },
    created() {
      this.getData()
      this.department = Department;
    },
    methods: {
      validateNumber(even, data, callback){
        var re = /^1[3456789]\d{9}$/;
        if (!re.test(data)) {
            callback(new Error('请输入电话号码!'));
        }else{
            callback();
        }
      },
      successUpload (response, file, fileList) {
        this.fileList = [];
        api.importStaff({path: response.data}).then(res => {
          this.getData();
          this.$message.success('导入成功');
        })
      },
      getData() {
        this.isLoading = true
        api.getStaffPage(this.pageGrid).then(res => {
          if (res.code === 200) {
            this.tableData = res.totalElement
            this.total = res.total
            this.isLoading = false
          }
        }).catch(
          this.isLoading = false
        )
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let send = JSON.parse(JSON.stringify(this.ruleForm));
            if(!this.isClick) return;
            this.isClick = false;
            if(send.id){
              api.updateStaff(send).then((res) => {
                this.delSuccessSave(res)
              },error => {
                this.isClick = true;
              })
            }else{
              api.addStaff(send).then((res) => {
                this.delSuccessSave(res)
              },error => {
                this.isClick = true;
              });
            }
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      delSuccessSave(res){
        this.isClick = true;
        if(res.code == 200){
          this.$message.success('保存成功！');
          this.getData();
          this.dialogFormVisible = false;
        }
      },
      closeDialog() {
        this.$refs['ruleForm'].resetFields();
        this.dialogFormVisible = false;
      },
      addUser () {
        this.ruleForm = {
          name: '',
          dept: '',
          mobile: '',
          number: '',
          production: ''
        }
        this.dialogFormVisible = true
      },
      editUser(row) {
        this.ruleForm = row
        this.dialogFormVisible = true
      },
      deleteUser (row) {
        this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          api.deleteStaff({ number: row.number }).then((res) => {
              if (res.code == 200) {
                this.$message.success('删除成功！');
                this.pageGrid.pageNo = 1;
                this.getData();
              } else {
                this.$message.error(res.msg);
              }
            });
        }).catch(() => {         
        });
      },
      clearSearch() {
        this.pageGrid = {
          pageNo: 1,
          pageSize: 10,
          parameter: {
            channel: null,
            state: null,
            mobile: null,
            rbtStatus: null
          }
        }
        this.getData()
      },
      //分页
      handleCurrentChange(val) {
        this.pageGrid.pageNo = val;
        this.getData();
      },
      //分页
      handleSizeChange(val) {
        this.pageGrid.pageSize = val;
        this.getData();
      }
    }
  }
</script>

<style scoped lang="less">
.upload-demo {
    height: 32px;
    display: inline-block;
    margin-left: 10px;
}
.el-upload--text {
  background-color: #fff;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  box-sizing: border-box;
  width: 360px;
  height: 180px;
  text-align: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.el-upload--text .el-icon-upload {
  font-size: 67px;
  color: #97a8be;
  margin: 40px 0 16px;
  line-height: 50px;
}

.el-upload--text {
  color: #97a8be;
  font-size: 14px;
  text-align: center;
}

.el-upload--text em {
  font-style: normal;
}
.ruleForm {
  width: 400px;
}
</style>
